<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--before after  beforeInsert afterInsert-->
    <style>
        .aaron{
            border: 1px solid red;
            height: 300px;
            width:309px;
        }
    </style>
</head>
<body>
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
    <p class="test1">测试before</p>
</div>
<div class="aaron">
    <p class="test2">测试after</p>
</div>
<div class="test1" style="border: 1px solid yellow">

    div(class=test1)
</div>
<hr>
<div class="test2" style="border: 1px solid green">
    div(class=test2)
</div>

<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script type="text/javascript">
    $("#bt1").click(function () {
        //只要有class=test1的都会匹配到这个方法，都会在之前加入 这么一段话
//        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>');
//insertBefore 就是反过来 没有什么区别》？
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    $("#bt2").click(function () {
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
    })


</script>
</body>
</html>